<!--
 * @Author: lg
 * @Date: 2024-05-10 17:10:25
 * @LastEditors: lg
 * @LastEditTime: 2024-08-14 16:32:44
 * @Description:
 * @FilePath: \front-eng\lg-ui-vue-demo\src\views\business-demo\permission-config\major\index.vue
-->
<template>
  <div class="home">
    <div class="operate-area">
      <el-button @click="handleHaveChecked">获取勾选的权限</el-button>
      <el-button @click="handleSelectLastChecked">反选上次勾选的权限</el-button>
    </div>

    <permission-config
      :power-tree="powerTree"
      v-if="powerTree?.length > 0"
      :current-checked-powers="currentCheckedPowers"
      ref="permissionConfigRef"
    >
    </permission-config>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import PermissionConfig from '../components/main.vue';
import { mockData } from './mock-data';
import { checkedMockData } from './last-checked-data';
import { treeToArray } from '@/utils/deal-permission-config/index';
import { cloneDeep } from 'lodash-es';
const powerTree = ref<Array<any>>([]);
const currentCheckedPowers = ref<Array<any>>([]);

const getData = async () => {
  const res = await Promise.resolve(mockData);
  powerTree.value = res.data;
};

// 获取所有选中的id
const getPowerIds = (arr: any) => {
  let result: Array<any> = [];
  arr?.forEach((item: any) => {
    if (item.isSelect || item.isSelect === '') {
      result.push(item);
    }
    if (item?.actions) {
      item.actions?.forEach((action: any) => {
        if (action.isChecked) {
          result.push(action);
        }
      });
    }
  });
  return result;
};

const permissionConfigRef = ref(null);
/**
 * @description: 获取权限
 * @return {*}
 */
const handleHaveChecked = () => {
  console.table(getPowerIds(treeToArray(permissionConfigRef.value.tableData)));
};
/**
 * @description: 反选上次已选择的权限
 * @return {*}
 */
const handleSelectLastChecked = async () => {
  const res1 = await Promise.resolve(checkedMockData);
  currentCheckedPowers.value = res1.data.pcPowers;
};

onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.operate-area {
  padding: 16px;
}
</style>
